<template>
 <div>
    <Topbar />
  <div id="app" class="wrap clearfix ">
        <div class="local-con clearfix">
            <div class="sideL">
                <div class="l-topic">
                    <h1>{{Detail.title}}</h1>
                    <div class="sub-tit"><i class="i-zan"></i>
                        51人体验过
                        <span class="time" style="margin-left: 20px;"><em>阅读 {{Detail.viewnum}}</em></span> <span
                            class="time">旅游攻略<em>{{Detail.createTime | dateFmt("YYYY-MM-DD HH:mm:ss")}}</em></span></div>
                    <div class="user_list">
                        <div class="clearfix">
                            <div class="author"><a href="javascript:;" target="_blank"><img
                                        src="../assets/images/wKgEaVy2nheAN9y5AAorszCM1vQ56.jpeg" alt="" width="90"
                                        height="90"></a></div>
                            <div class="info">
                                <div class="in-t"><a href="javascript:;" target="_blank"><span
                                            class="name">叩丁狼官方</span></a> <span class="more">6篇游记 429个粉丝</span></div>
                                <p>
                                    人有欢乐，也有苦衷。所谓的完美，其实只是来源于我们的心灵。人生不能重新来过，每个人也不可能重复站在同一个路口。但请不要害怕选择，因为选择没有绝对的好与坏，每种选择都会为你带来一种不一样的感受和别样的精彩。
                                </p>
                            </div>
                            <div class="contact user-home"><a href="javascript:;" target="_blank"><i></i>
                                    <p>TA的窝</p>
                                </a></div>
                        </div>
                    </div>
                </div>
                <div class="l-topic">
                <div class="_j_content" v-html="Detail.content"></div>
                </div>
                <div class="copyRight m_t_20">
                    <p style="text-align: left;">本文著作权归 骡窝窝 所有，任何形式转载请联系作者。©2019 骡窝窝自由行
                        <a class="r-report" style="display: inline; float: right; color: rgb(153, 153, 153);">举报</a></p>
                </div>
                  <div class="l-comment">
            <div class="clearfix com-form">
              <div class="img">
                <img
                  src="../assets/images/wKgED1uqIreAU9QZAAAXHQMBZ74008.png"
                />
              </div>
              <div class="fm-tare user-log">
                <textarea
                  id="content"
                  class="_j_comment_content"
                  v-model="txtVal"
                ></textarea>
                <button type="button" class="_j_save_comment" @click="Addcom()">
                  评论
                </button>
              </div>
            </div>
            <div id="strategyComment" class="com-box">
              <h2>
                评论（<span class="_comment_num">{{ commentList.totalElements}}</span
                >）
              </h2>
              <ul id="comments">
                <ul id="comments">
                  <li
                    class="clearfix comment_item"
                    v-for="item in commentList.content"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item.headImgUrl" />
                    </div>
                    <div class="info">
                      <h3>{{ item.nickname }}</h3>
                      <h4>
                        {{ item.createTime | dateFmt("YYYY-MM-DD HH:mm:ss") }}
                      </h4>
                      <div class="com-cont">{{ item.content }}</div>
                      <div class="rep-del hide" style="display: none">
                        <i></i> <a role="button" class="reply-report">举报 </a>
                        <i></i> <span class="_j_comment_like_num">0</span>&nbsp;
                        <a
                          href="javascript:;"
                          class="btn-comment-like _j_like_comment_btn like"
                        ></a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div style="float: right">
                  <div style="float: left">
                    <span style="line-height: 30px">
                      共{{commentList.totalPages}}页 /{{ commentList.totalElements}}条&nbsp;&nbsp;&nbsp;</span
                    >
                  </div>
                  <div
                    id="pagination"
                    class="jq-pagination"
                    style="display: inline"
                  >
                    <a
                      :class="[page >= commentList.totalPages ? 'prev' : 'disabled prev']"
                      href="javascript:void(0);"
                      jp-role="prev"
                      jp-data="0"
                      @click="
                    GetcommentAPI(id, --page);
                    pageIndex--;
                  "
                      >上一页</a
                    ><a
                      href="javascript:void(0);"
                      jp-role="page"
                      jp-data="1"
                      :class="[index == pageIndex ? 'active' : '']"
                  v-for="(itemPage, index) in commentList.totalPages"
                  :key="index"
                   @click="
                    GetcommentAPI(id, itemPage);
                    pageIndex = index;
                  "
                      >{{itemPage}}</a
                    ><a
                      :class="[page == commentList.totalPages ? 'disabled next' : 'next']"
                      href="javascript:void(0);"
                      jp-role="next"
                      jp-data="2"
                       @click="
                    GetcommentAPI(id, ++page);
                    pageIndex++;
                  "
                      >下一页</a
                    ><a
                     :class="[page == commentList.totalPages ? 'disabled last' : 'last']"
                      href="javascript:void(0);"
                      jp-role="last"
                      jp-data="1"
                       @click="
                    GetcommentAPI(id, commentList.totalPages);
                    page = commentList.totalPages;
                    pageIndex = commentList.totalPages - 1;
                  "
                      >尾页</a
                    >
                  </div>
                </div>
              </ul>
            </div>
          </div>
            </div>
            <div class="sideR">
                <div class="side_inner _j_sticky_block">
                    <div class="_j_other_column">
                        <div class="bar-sar clearfix"><a href="javascript:;" title="评论" class="_j_goto_comment"><i
                                    class="i01"></i><em class="replay_num">{{Detail.replynum}}</em></a>
                            <div class="bs_collect"><a href="javascript:void(0);" title="收藏"
                                    class="bs_btn btn-collect"><i class="collect_icon i02 "></i> <em
                                        class="favorite_num ">{{Detail.favornum}}</em></a></div>
                            <div class="bs_share"><a href="javascript:;" title="分享" class="btn-share bs_btn"><i
                                        class="i03"></i><em>{{Detail.sharenum}}</em></a></div> <a href="javascript:;" title="顶"
                                class="_j_support_btn"><i class="i05 "></i><em class="support_num">{{Detail.thumbsupnum}}</em></a>
                        </div>
                        <div class="bs_pop clearfix" style="display: none;"><a title="分享到新浪微博" rel="nofollow"
                                role="button" data-japp="sns_share" data-jappfedata="" data-key="wb"
                                data-title="盘点 | 广州周边好玩的地方有哪些？" data-content="盘点 | 广州周边好玩的地方有哪些？"
                                data-pic="http://b4-q.mafengwo.net/s13/M00/7F/2D/wKgEaVyLhXKABFf5AAI6AbEkm0o40.jpeg?imageView2%2F2%2Fw%2F640%2Fh%2F360%2Fq%2F90"
                                data-url="http://www.mafengwo.cn/gonglve/ziyouxing/1775.html" class="sina"></a> <a
                                title="分享到QQ空间" rel="nofollow" role="button" data-japp="sns_share" data-jappfedata=""
                                data-key="qz" data-title="盘点 | 广州周边好玩的地方有哪些？" data-content="盘点 | 广州周边好玩的地方有哪些？"
                                data-pic="http://b4-q.mafengwo.net/s13/M00/7F/2D/wKgEaVyLhXKABFf5AAI6AbEkm0o40.jpeg?imageView2%2F2%2Fw%2F640%2Fh%2F360%2Fq%2F90"
                                data-url="http://www.mafengwo.cn/gonglve/ziyouxing/1775.html" class="zone"></a> <a
                                title="分享到微信" rel="nofollow" role="button" data-japp="weixin_dialog_share"
                                data-jappfedata=""
                                data-wx_qr="http://www.mafengwo.cn/qrcode.php?text=https%3A%2F%2Fm.mafengwo.cn%2Fgonglve%2Fziyouxing%2F1775.html&amp;size=150&amp;eclevel=H&amp;logo=&amp;__stk__=d3c9fd1d23b028a45ec5b71a30324cb9_391fafc14c22754068d1543e8cfc5d04"
                                data-detail="1775" class="weixin"></a></div>
                    </div>
                </div>
                <div class="side-sales">
                    <h3>本周热卖</h3>
                    <ul>
                        <li><a href="javascript:;" target="_blank"><span class="image"><img
                                        src="../assets/images/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"></span>
                                <div title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                                    class="title">
                                    广州长隆野生动物世界门票 随买随用 ／广州...</div> <span class="price">¥260</span>
                            </a></li>
                        <li><a href="javascript:;" target="_blank"><span class="image"><img
                                        src="../assets/images/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"></span>
                                <div title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                                    class="title">
                                    广州长隆欢乐世界门票 当天可买／广州长隆旅...</div> <span class="price">¥187</span>
                            </a></li>
                        <li><a href="javascript:;" target="_blank"><span class="image"><img
                                        src="../assets/images/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"></span>
                                <div title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）" class="title">
                                    当天可订/广州长隆野生动物世界门票/长隆野生...</div> <span class="price">¥256</span>
                            </a></li>
                        <li><a href="javascript:;" target="_blank"><span class="image"><img
                                        src="../assets/images/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"></span>
                                <div title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）" class="title">广州长隆水上乐园门票
                                    一票通玩（电子票／当地...</div> <span class="price">¥122</span>
                            </a></li>
                        <li><a href="javascript:;" target="_blank"><span class="image"><img
                                        src="../assets/images/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"></span>
                                <div title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）" class="title">
                                    寻味广州1日游（6人小团·探黄埔军校陈家祠·...</div> <span class="price">¥288</span>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <Footer />
 </div>
</template>

<script>
import Topbar from "../components/Topbar.vue";
import Footer from "../components/Footer.vue";
import {DetailAPI, CommentAPI, AddCommentAPI} from "@/request/api";
export default {
    data(){
        return{
        // 攻略详情数据
          Detail:{},
        //   评论数据
        id : this.$route.query.id,
    commentList: {},
      txtVal: "", 
      // 当前页码数 
      page:1,
      // 页码存索引
     pageIndex: 0,
       
        }
    },
 components: {
    Topbar,
    Footer,
  },
  async created(){
    // 请求攻略详情数据
     let id = this.$route.query.id;
let res = await DetailAPI({
    id:id
}) 
this.Detail=res.data.data
this.GetcommentAPI(this.id,this.page);
  },
 methods: {
//         // 上一页
// async onFn(id,page){
// let res = await GetcommentAPI({
// strategyId:id,
// currentPage:page
// })
// this.content=res.data.data.content;
// },
// // 点击页面切换
//  async pageFn(id,page){
// let res = await GetcommentAPI({
// strategyId:id,
// currentPage:page
// })
// this.content=res.data.data.content;
// },  
//   // 下一页
// async nextFn(id,page){
// let res = await GetcommentAPI({
// strategyId:id,
// currentPage:page
// })
// this.content=res.data.data.content;
// },
// // 尾页
// async lastFn(id,page){
// let res = await GetcommentAPI({
// strategyId:id,
// currentPage:page
// })
// this.content=res.data.data.content;
// },
    // 封装请求评论数据
    async GetcommentAPI(id,page) {
    //   let id = this.$route.query.id;
      let res = await CommentAPI({
        currentPage: page,
        strategyId: id,
      });
      this.commentList = res.data.data
      console.log(res.data.data);
    },
    // 点击评论
    async Addcom() {
    let token = localStorage.getItem("token");
    if(!token){
        alert("请先登录！")
        return;
    }
      let id = this.$route.query.id;
      let res = await AddCommentAPI({
        content: this.txtVal,
        strategyId: id,
      });
      this.txtVal = "";
 this.GetcommentAPI(this.id,this.page);
    },
  },
}
</script>

<style lang="less" scoped>
.wrap {
    width: 1000px;
    margin: 0 auto;
}

.crumb {
    margin: 15px 0 20px;
    font-size: 14px;
    color: #333;
    line-height: 20px;
}

a {
    background-color: transparent;
    text-decoration: none;
    color: #ff9d00;
    cursor: pointer;
}

a:hover {
    outline: 0;
    text-decoration: underline;
    color: #ff8a00;
}

.crumb a {
    color: #333;
}

.crumb em {
    color: #ff9d00;
    font-style: normal;
}

.local-con {
    margin-top: 20px;
}

.sideL {
    width: 680px;
    float: left;
}

.sideR {
    position: relative;
    width: 275px;
    float: right;
    padding-top: 5px;
}

.l-topic h1 {
    font-size: 30px;
    color: #333;
    line-height: 40px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
    word-wrap: break-word;
}

.l-topic p {
    font-size: 16px;
    color: #333;
    line-height: 26px;
}

.l-topic .sub-tit {
    color: #333;
    font-size: 14px;
    padding: 13px 0 0;
    margin-bottom: 35px;
    overflow: hidden;
}

.l-topic .sub-tit .time {
    float: right;
    margin-left: 20px;
    color: #999;
}

.l-topic .sub-tit .time em {
    font-style: normal;
    margin-left: 10px;
}

.l-topic .sub-tit .time {
    float: right;
    color: #999;
}

.user_list {
    padding: 16px 0 0 0;
    color: #333;
    border: 1px solid #e5e5e5;
    margin: 25px 0 35px;
    overflow: hidden;
}

.user_list .author {
    margin-left: 15px;
    _display: inline;
    width: 90px;
    height: 90px;
    float: left;
    border-radius: 50%;
    overflow: hidden;
}

.user_list .info {
    width: 440px;
    float: left;
    padding-left: 22px;
}

.user_list .in-t {
    color: #333;
    line-height: 20px;
}

.user_list .in-t .name {
    font-size: 16px;
}

.user_list .in-t .more {
    color: #666;
    font-size: 16px;
    margin-left: 10px;
}

.user_list .info p {
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    margin: 6px 0 8px 0;
    color: #666;
    color: #333;
}

.user_list .contact {
    width: 110px;
    height: 96px;
    border-left: 1px solid #e5e5e5;
    float: left;
    text-align: center;
}

.user_list .contact i {
    width: 32px;
    height: 32px;
    background: url(../assets/images/list_sprites7.png) no-repeat 0 -61px;
    display: block;
    margin: 18px auto 0;
}

.user_list .contact p {
    font-size: 14px;
    padding: 12px 0;
    color: #333;
}

.sideR .side_inner {
    background-color: #fff;
}

.sideR .bar-sar {
    margin-bottom: 10px;
}

.sideR .bar-sar a {
    float: left;
    display: block;
    width: 68px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: #333;
}

.sideR .bar-sar a i {
    display: block;
    width: 25px;
    height: 24px;
    margin: 0 auto 10px auto;
    background: url(../assets/images/list_sprites01.png?a=1) no-repeat;
}

.sideR .bar-sar a em {
    font-style: normal;
    font-size: 16px;
    color: #333;
}

.sideR .bar-sar a i.i01 {
    background-position: 0 0;
}

.sideR .bar-sar a i.i02 {
    background-position: -68px 0;
}

.sideR .bar-sar a i.i03 {
    background-position: -136px 0;
}

.sideR .bar-sar a i.i04 {
    background-position: -204px 0;
}

.sideR .bar-sar a i.i05 {
    background: url(../assets/images/icon_support.png) no-repeat;
    background-size: 100%;
}

.copyRight {
    width: 680px;
    padding-top: 45px;
    background: url(../assets/images/copyright.png) no-repeat center center;
    overflow: hidden;
}

.m_t_20 {
    margin-top: 20px;
}

.copyRight p {
    background-color: #fff;
    text-align: center;
    line-height: 20px;
    color: #d1d1d1;
    font-size: 12px;
}

.l-comment {
    margin-top: 85px;
}

.com-box {
    border-top: 1px solid #e5e5e5;
}

.com-form .img {
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    float: left;
}

.com-form .fm-tare {
    float: right;
    width: 615px;
    position: relative;
}

.com-form .img img {
    width: 100%;
    display: block;
}

.com-form .fm-tare textarea {
    height: 55px;
    width: 585px;
    padding: 14px;
    border: 1px solid #e5e5e5;
    resize: none;
    outline: 0;
    border-radius: 5px;
    float: right;
    font-size: 14px;
    color: #666;
}

.com-form .user-log textarea {
    border: 1px solid #ffa200;
}

.com-form .fm-tare button {
    width: 114px;
    height: 30px;
    background: #efefef;
    border: 0;
    outline: 0;
    cursor: pointer;
    display: block;
    float: right;
    margin: 20px 0;
    border-radius: 5px;
    font-size: 16px;
    color: #999;
    text-align: center;
    padding: 0;
    line-height: 30px;
}

.com-form .user-log button {
    background: #ff9d00;
    color: #FFF;
}

.com-box h2 {
    font-size: 24px;
    color: #333;
    font-weight: normal;
    line-height: 24px;
    margin: 36px 0;
}

.com-box ul li {
    border-bottom: 1px solid #e5e5e5;
    padding: 30px 0;
}

.com-box li .img {
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    float: left;
}

.com-box li .img img {
    width: 100%;
    display: block;
}

.com-box li .info {
    float: left;
    margin-left: 16px;
    width: 615px;
    position: relative;
}

.com-box .info h3 {
    font-size: 18px;
    color: #333;
    font-weight: normal;
    line-height: 28px;
}

.com-box .info h4 {
    font-size: 12px;
    color: #999;
    font-weight: normal;
    line-height: 14px;
}

.com-box .info .com-cont {
    font-size: 14px;
    color: #666;
    line-height: 28px;
    margin-top: 8px;
}

.com-box .rep-del {
    position: absolute;
    right: 0;
    top: 20px;
}

.com-box .rep-del i {
    display: inline-block;
    width: 1px;
    background: #e5e5e5;
    height: 12px;
    margin: 0 14px;
    vertical-align: top;
}

.com-box .rep-del a {
    color: #333;
    font-size: 12px;
    line-height: 12px;
    text-decoration: none;
}

.com-box .rep-del a {
    color: #333;
    font-size: 12px;
    line-height: 12px;
    text-decoration: none;
}

.com-box .rep-del a {
    color: #333;
    font-size: 12px;
    line-height: 12px;
    text-decoration: none;
}

.com-box .rep-del .btn-comment-like:after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    // background: url(../assets/images/icon_like.png) no-repeat;
    background-size: 100%;
    vertical-align: text-bottom;
}

.hide {
    display: none;
}

.bs_pop {
    width: 132px;
    padding: 8px 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    display: none;
}

.bs_pop {
    top: 70px;
}

.bs_pop a {
    width: 36px;
    height: 36px;
    display: inline-block;
    margin: 0 12px 0 0;
    // background: #d84c4c url(../assets/images/sprite_v33.png) -295px -569px no-repeat;
    line-height: 200px;
    overflow: hidden;
    float: left;
    border-radius: 5px;
}

.bs_pop a.zone {
    background-color: #3f8bc0;
    background-position: -331px -569px;
}

.bs_pop a.weixin {
    margin-right: 0;
    background-color: #73a64f;
    background-position: -367px -569px;
}

.side-sales {
    /* float: right; */
    width: 275px;
}

.side-sales h3 {
    font-size: 18px;
    margin: -3px 0 15px;
    font-weight: normal;
    color: #333;
    line-height: 24px;
}

.side-sales li {
    margin-bottom: 20px;
}

.side-sales li a {
    display: block;
    padding-left: 110px;
    height: 70px;
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}

.side-sales .image {
    float: left;
    margin-left: -110px;
    width: 100px;
    height: 70px;
    overflow: hidden;
}

.side-sales .title {
    height: 40px;
    margin-bottom: 12px;
}

.side-sales .price {
    color: #ff9d00;
}

.side-sales li a:hover {
    text-decoration: none;
}

.side-sales li a:hover .title {
    color: #ff9d00;
}
.sideR .bar-sar a i.on-i02 {
    // background: url(../assets/images/list_sprites02.png) no-repeat;
    background-position: -68px 0;
}



.f-block .p-section {
    font-size: 14px;
    line-height: 26px;
    margin: 13px 0 28px;
    word-break: break-all;
}
.f-block>img {
    margin: 10px 0;
    display: block;
}
img {
    border: 0;
    vertical-align: middle;
}
.f-block>img {
    margin: 10px 0;
    display: block;
}

.f-block img {
    max-width: 100%;
}
.f-block>img {
    margin: 10px 0;
    display: block;
}
.f-block img {
    max-width: 100%;
}

.tips-box {
    margin: 35px 0;
    border: 1px solid #ffe3b7;
    background-color: #fff5e5;
    padding: 15px 20px;
    line-height: 26px;
    color: #333;
    font-size: 14px;
}
.raiders {
    margin: 30px 0;
    position: relative;
}
.clearfix {
    *zoom: 1;
}
a {
    background-color: transparent;
    text-decoration: none;
    color: #ff9d00;
    cursor: pointer;
}
.raiders .img {
    width: 236px;
    height: 153px;
    float: left;
    margin-right: 15px;
    overflow: hidden;
    position: relative;
    z-index: 7;
}
body, p, div {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

div {
    display: block;
}
.raiders .img img {
    width: 100%;
}

img {
    border: 0;
    vertical-align: middle;
}

.f-block img {
    max-width: 100%;
}

.view_poi_info p {
    color: #666;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.product-box {
    margin: 35px 0;
    border: 1px solid #e5e5e5;
    padding: 9px;
}
.product-box .item:last-child {
    margin: 0;
}

.product-box .item {
    margin-bottom: 10px;
}
.product-box .item a {
    display: block;
    padding: 10px 72px 10px 10px;
    height: 90px;
    position: relative;
    color: #999;
}

.product-box .img {
    float: left;
    margin-right: 20px;
    width: 140px;
    overflow: hidden;
}
.product-box h3 {
    margin: 10px 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
    color: #666;
    height: 40px;
    overflow: hidden;
}

.product-box .p-arr {
    position: absolute;
    right: 18px;
    top: 40px;
    width: 12px;
    height: 22px;
    background: url(../assets/images/list_sprites7.png) no-repeat -140px -40px;
}



.com-box .rep-del .btn-comment-like:after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    // background: url(../assets/images/icon_like.png) no-repeat;
    background-size: 100%;
    vertical-align: text-bottom
}

// .com-box .rep-del .btn-comment-like.liked:after {
//     background-image: url(../assets/images/icon_liked.png)
// }
.jq-pagination {
    height: 30px;
    margin: 10px 0;

}
.jq-pagination a {
    text-decoration: none;
    border: aliceblue;
    color: #333;
    height: 24px !important;
    border-radius: 4px;
}
.jq-pagination a {
    height: 24px !important;
    display: block;
    float: left;
    padding: 0 10px;
    text-align: center;
    line-height: 24px;

}
.jq-pagination .active {
    background-color: #ff9d00;
    color: #fff;
    padding: 0 10px;
}
.jq-pagination .prev {
    background-color: #ff9d00;
}
.jq-pagination .next {
    background-color: #ff9d00;
    border-left-width: 0;
    border-right-width: 1px;
}
.jq-pagination .active.prev,
.jq-pagination .active.next {
    color: #dcdcdc;
    background: #fff;
}
.jq-pagination a:hover {
    background-color: #cde4f8;
}
.jq-pagination .active:hover {
    background-color: #6babdd;
}
.jq-pagination a.disabled {
    display: none;
}
</style>